<template>
  <div class="one-three-detail-container">
    <Breadcrumb>
      <template #bread-name> 答题详情 </template>
    </Breadcrumb>
    <main class="question-box">
      <div class="one-info flex">
        <span>答题人：{{ oneInfo?.student_name }}</span>
        <div class="border"></div>
        <span
          >提交时间：{{
            dayjs(oneInfo?.submit_time || 0).format('YYYY-MM-DD HH:mm:ss')
          }}</span
        >
        <div class="border"></div>
        <span>答题人：{{ oneInfo?.student_name }}</span>
        <div class="border"></div>
        <span>{{ oneInfo?.question_count || topicList.length }}道</span>
        <div class="border"></div>
        <span>得分率：{{ (oneInfo?.score_rate * 100).toFixed(0) }} %</span>
      </div>
      <AssignTopic
        v-for="(question, index) in topicList"
        :key="index"
        :index="index + 1"
        :topic-data="question.question_detail"
      >
        <template #student-box>
          <div class="student-answer">
            <div>学生作答：</div>
            <!-- 文本答案 -->
            <div
              v-if="!question.children_response"
              v-html="
                getNormalizeData(
                  JSON.parse(question.response),
                  getParseData(question.question_detail)
                )
              "
            ></div>
            <template v-else>
              <div
                v-for="(child, index) in question.children_response"
                :key="index"
              >
                <div v-if="child.response === '[]'"></div>
                <template v-else>
                  <div class="flex student-box">
                    <span>({{ index + 1 }})</span>
                    <span
                      v-html="
                        getNormalizeData(
                          JSON.parse(child.response),
                          getParseData(
                            question.question_detail.subproblem[index]
                          )
                        )
                      "
                    ></span>
                  </div>
                </template>
              </div>
            </template>
            <!-- 图片答案 -->
            <PictureList
              v-if="question.imgList?.length"
              :imgUrl="question.imgList"
            />
          </div>
        </template>
        <template #more-action>
          <div
            class="answer-box flex"
            :style="{ color: correctType[question.teacher_correct]?.color }"
          >
            <div class="answer-item flex">
              批改结果：
              <img
                class="correct-img"
                :src="correctType[question.teacher_correct].img"
              />
            </div>
          </div>
        </template>
      </AssignTopic>
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getStudentTaskResponseDetail } from '@/apis/assignment/index'
import { useRoute } from 'vue-router'
import AssignTopic from '../components/AssignTopic.vue'
import { getNormalizeData, getParseData } from '@/utils/answer'
import dayjs from 'dayjs'
import RightImg from '@/assets/images/assignment/right-color.png'
import WrongImg from '@/assets/images/assignment/wrong-color.png'
import HalfImg from '@/assets/images/assignment/half-color.png'
import WaitImg from '@/assets/images/assignment/wait-black.png'
import PictureList from '@/components/picture-preview/PictureList.vue'

const route = useRoute()

const correctType = {
  '-1': {
    img: WaitImg,
    color: '#D89B25'
  },
  0: {
    img: WrongImg,
    color: '#FF6D65'
  },
  1: {
    img: HalfImg,
    color: '#D89B25'
  },
  2: {
    img: RightImg,
    color: '#4EC680'
  }
}
const topicList = ref([])
const oneInfo = ref()
const getDetail = async () => {
  let { task_id, taskInfo } = route.query
  if (!task_id || !taskInfo) return
  taskInfo = JSON.parse(taskInfo)
  const res = await getStudentTaskResponseDetail({
    task_id,
    student_id: taskInfo.student_id
  })
  let list = res.data || []
  list.forEach(question => {
    let imgList = JSON.parse(question.response_url || '[]')
    if (!question.children_response) return
    question.children_response.forEach(child => {
      imgList.push(...JSON.parse(child.response_url || '[]'))
    })
    question.imgList = imgList
  })
  topicList.value = list
  oneInfo.value = taskInfo
}

const initData = () => {
  getDetail()
}
initData()
</script>

<style lang="less" scoped>
.one-three-detail-container {
  .question-box {
    margin-top: 20px;
    .one-info {
      gap: 16px;
      margin-bottom: 10px;
      .border {
        height: 20px;
        width: 2px;
        background-color: #b4b6ba;
      }
    }
    .student-answer {
      padding: 20px;
      margin-bottom: 20px;
      background-color: #f7f9ff;
      :deep(.pic-img) {
        width: 200px;
      }
      .student-box {
        gap: 10px;
      }
    }
    .answer-box {
      position: absolute;
      left: 10px;
      gap: 20px;
      .answer-item {
      }
      .correct-img {
        width: 20px;
      }
    }
  }
}
</style>
